<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Synapse Team</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://unpkg.com/monaco-editor@0.45.0/min/vs/loader.js"></script>
</head>
<body>
    <div id="app">
        <!-- 配置对话框 -->
        <div id="config-dialog" class="config-dialog">
            <div class="config-content">
                <h2>欢迎使用 Synapse Team</h2>
                <p>请完成初始配置以开始使用</p>
                
                <div class="config-step" id="step-1">
                    <h3>步骤 1: 选择沙盒文件夹</h3>
                    <p>选择用于项目文件的安全沙盒目录</p>
                    <button id="select-folder-btn" class="btn-primary">选择文件夹</button>
                    <div id="selected-folder" class="selected-path"></div>
                </div>
                
                <div class="config-step" id="step-2" style="display: none;">
                    <h3>步骤 2: AI模型配置</h3>
                    <p>配置AI模型连接</p>
                    <div class="form-group">
                        <label>模型URL:</label>
                        <input type="text" id="ai-url" value="http://127.0.0.1:11434" placeholder="AI模型服务地址">
                    </div>
                    <div class="form-group">
                        <label>模型名称:</label>
                        <input type="text" id="ai-model" value="Gemma3:4b" placeholder="模型名称">
                    </div>
                    <button id="test-ai-btn" class="btn-secondary">测试连接</button>
                    <div id="ai-test-result"></div>
                </div>
                
                <div class="config-step" id="step-3" style="display: none;">
                    <h3>配置完成</h3>
                    <p>所有配置已完成，可以开始使用了！</p>
                    <button id="start-app-btn" class="btn-primary">开始使用</button>
                </div>
                
                <div class="config-navigation">
                    <button id="prev-btn" class="btn-secondary" style="display: none;">上一步</button>
                    <button id="next-btn" class="btn-primary">下一步</button>
                    <button id="skip-btn" class="btn-text">跳过配置</button>
                </div>
            </div>
        </div>
        
        <!-- 主应用界面 -->
        <div id="main-app" style="display: none;">
            <header class="app-header">
                <h1>Synapse Team</h1>
                <div class="header-actions">
                    <button id="open-config-btn" class="btn-secondary">配置</button>
                    <button id="select-sandbox-btn" class="btn-secondary">选择沙盒</button>
                    <button id="refresh-files-btn" class="btn-secondary">刷新文件</button>
                </div>
            </header>
            
            <main class="app-main">
                <div class="sidebar">
                    <div class="team-members">
                        <h3>团队成员</h3>
                        <div class="member-list">
                            <div class="member" data-role="项目经理">项目经理</div>
                            <div class="member" data-role="前端开发工程师">前端开发工程师</div>
                            <div class="member" data-role="后端开发工程师">后端开发工程师</div>
                            <div class="member" data-role="界面设计师">界面设计师</div>
                            <div class="member" data-role="系统架构师">系统架构师</div>
                            <div class="member" data-role="数据库工程师">数据库工程师</div>
                            <div class="member" data-role="系统测试员">系统测试员</div>
                            <div class="member" data-role="版本管理员">版本管理员</div>
                            <div class="member" data-role="软件产品经理">软件产品经理</div>
                            <div class="member" data-role="AI开发工程师">AI开发工程师</div>
                        </div>
                    </div>
                    
                    <div class="file-explorer">
                        <h3>文件浏览器</h3>
                        <div id="file-tree" class="file-tree">
                            <!-- 文件树将在这里动态显示 -->
                        </div>
                    </div>
                    
                    <div class="tasks-panel">
                        <h3>任务管理</h3>
                        <div class="task-controls">
                            <button id="start-all-tasks-btn" class="btn-secondary">批量执行</button>
                            <button id="reset-tasks-btn" class="btn-secondary">重置任务</button>
                        </div>
                        <div id="task-status" class="task-status">
                            <!-- 任务状态将在这里显示 -->
                        </div>
                        <div id="tasks-list" class="tasks-list">
                            <!-- 任务将在这里动态显示 -->
                        </div>
                    </div>
                </div>
                
                <div class="main-content">
                    <div class="output-panel">
                        <div class="panel-tabs">
                            <div class="tab active" data-tab="editor">代码编辑器</div>
                            <div class="tab" data-tab="preview">预览</div>
                            <div class="tab" data-tab="console">控制台</div>
                            <div class="tab" data-tab="gantt">甘特图</div>
                        </div>
                        
                        <div class="panel-content">
                            <div id="editor-tab" class="tab-content active">
                                <div id="monaco-editor" class="monaco-editor"></div>
                            </div>
                            
                            <div id="preview-tab" class="tab-content">
                                <div id="preview-content" class="preview-content">
                                    <div class="preview-placeholder">
                                        <p>选择文件以预览内容</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div id="console-tab" class="tab-content">
                                <div id="console-output" class="console-output">
                                    <div class="console-placeholder">
                                        <p>控制台输出将在这里显示</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div id="gantt-tab" class="tab-content">
                                <div id="gantt-chart" class="gantt-chart">
                                    <div class="gantt-placeholder">
                                        <p>甘特图将在这里显示</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="chat-area">
                        <div id="chat-messages" class="chat-messages"></div>
                        <div class="chat-input">
                            <div class="input-actions">
                                <button id="upload-btn" class="btn-icon" title="上传文件">📎</button>
                            </div>
                            <textarea id="message-input" placeholder="输入消息..."></textarea>
                            <button id="send-btn" class="btn-primary">发送</button>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <script src="renderer.js"></script>
</body>
</html>
